<template>
  <div style="padding: 20px">
    <Alert message="边框示例" type="info" show-icon>
      <template #icon><smile-outlined /></template>
    </Alert>
    <div class="demoTittle">输入框尺寸</div>
    <div class="demoTittle2">-实线:1px，#e4e4e4</div>
    <a-divider />
    <div class="demoTittle2">-虚线:1px，#e4e4e4，间隔4px</div>
    <a-divider dashed />
    <div class="demoTittle">圆角</div>
    <a-space :size="60">
      <div class="demoTittle3">
        <div>-无圆角</div>
        <div>border-radius:0px</div>
        <div class="yuan"></div>
      </div>
      <div class="demoTittle3">
        <div>-小圆角</div>
        <div>border-radius:2px</div>
        <div class="yuan radius1"></div>
      </div>
      <div class="demoTittle3">
        <div>-大圆角</div>
        <div>border-radius:4px</div>
        <div class="yuan radius2"></div>
      </div>
      <div class="demoTittle3">
        <div>-大圆角</div>
        <div>border-radius:30px</div>
        <div class="yuan radius3"></div>
      </div>
    </a-space>
    <div class="demoTittle">投影</div>
    <div>
      <a-space :size="40">
        <div class="demoTittle3">
          <div>-基础投影 box-shadow:0px，2px，6px; rgba:51,51,51 .15%</div>
          <div class="shadow1"></div>
        </div>
        <div class="demoTittle3">
          <div>0px，4px，8px; rgba:51,51,51 .20%</div>
          <div class="shadow2"></div>
        </div>
      </a-space>
      <div class="demoTittle3">
        <div>-浅色投影 box-shadow:0px，2px，12px; rgba:51,51,51 .10%</div>
        <div class="shadow3"></div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { Alert } from 'ant-design-vue';
  import { SmileOutlined } from '@ant-design/icons-vue';
</script>

<style lang="less" scoped>
  .demoTittle {
    font-size: 20px;
    font-weight: 400;
    color: #444444;
    margin: 20px 0;
  }
  .demoTittle2 {
    font-size: 14px;
    padding: 20px 0;
    color: #494a4a;
  }

  .demoTittle3 {
    padding-bottom: 20px;
    color: #494a4a;
    display: flex;
    flex-direction: column;
    line-height: 22px;
  }
  .xian1 {
    border: 1px solid #e4e4e4;
  }
  .xian2 {
    border: 1px dashed #e4e4e4;
  }
  .yuan {
    width: 160px;
    height: 60px;
    border: 1px solid #e4e4e4;
  }
  .radius1 {
    border-radius: 2px;
  }
  .radius2 {
    border-radius: 4px;
  }
  .radius3 {
    border-radius: 30px;
  }
  .shadow1 {
    width: 400px;
    height: 100px;
    border: 1px solid #e4e4e4;
    box-shadow: 0px 2px 6px #33333326;
    margin-top: 16px;
  }
  .shadow2 {
    width: 400px;
    height: 100px;
    border: 1px solid #e4e4e4ff;
    box-shadow: 0px 4px 8px #33333333;
    margin-top: 16px;
  }
  .shadow3 {
    width: 400px;
    height: 100px;
    border: 1px solid #e4e4e4ff;
    box-shadow: 0px 2px 12px #33333319;
    margin-top: 16px;
  }
</style>
